<template>
  <div>
    <s-Header name="账号管理" :actions="actions"></s-Header>
      <div class="setting" >
        <van-form label-width="2.13333rem" @submit="onSubmit">
          <van-field
            v-model="state.nickName"
            name="nickName"
            label="昵称"
            :rules="[{ required: true, message: '请填写您的昵称' }]"
          />
          <van-field
            v-model="state.introduceSign"
            name="introduceSign"
            label="个性签名"
            :rules="[{ required: true, message: '请填写个性签名' }]"
          />
          <van-field
            v-model="state.password"
            type="password"
            name="password"
            label="修改密码"
            placeholder="请输入密码"
          />
          <div style="margin: 16px;">
            <van-button block type="primary"  @click="editBtn">保存</van-button>
          </div>
          <div style="margin: 16px;">
            <van-button block type="primary" @click="logoutBtn">退出登录</van-button>
          </div>

          <div style="margin: 16px;" v-if="false">
            <van-button block type="primary" @click="addActions">addActions</van-button>
          </div>
        </van-form>
      </div>
  </div>
</template>

<script setup>
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted, getCurrentInstance  } from 'vue'
  import { setLocal, getLocal } from '@/common/js/utils'
  import { getUserInfo, EditUserInfo, logout } from '@/service/user'
  import { showSuccessToast, showFailToast, showLoadingToast, closeToast } from 'vant'
  import md5 from 'js-md5'
  import { useRoute, useRouter } from 'vue-router'
  import sHeader from '@/components/SimpleHeader.vue'

  const state = reactive({
    nickName: '',
    introduceSign: '',
    password: '',
  })

  let actions = reactive([
    { id:'111',text: '选项一11',icon:'like-o',color:'red',disabled:false,className:'item1' },
    { id:'222',text: '选项二11',icon:'star-o',color:'green',disabled:true, className:'item2' },
  ])
  // 获取router实例
  const router = useRouter()
  // 获取当前组件route
  const route = useRoute()

  onMounted(async() => {
    const { data } = await getUserInfo()
    console.log(11111,data)
    state.nickName = data.nickName
    state.introduceSign = data.introduceSign
  })

  const editBtn = async ()=>{
    const params = {
      introduceSign: state.introduceSign,
      nickName: state.nickName,
    }
    if (state.password) {
      params.passwordMd5 = md5(state.password)
    } 
    const { data } = await EditUserInfo(params)
    console.log(11111,data)
    showSuccessToast('修改成功!')
  }

  const logoutBtn = async ()=>{
    const { resultCode } = await logout()
    if (resultCode == 200) {
      setLocal('token', '')
      // window.location.href = '/home'
      goTo('/home')
    }
  }

  const addActions = ()=>{
    console.log(1111,actions)
    // vant-popover组件中不支持监听actions的值
    actions = actions.concat({ id:'333',text: '选项三111',icon:'phone-o',color:'gray',disabled:false, className:'item3'})
    console.log(2222,actions)
  }
  const goBack = () => {
    router.go(-1)
  }

  const goTo = (r, query) => {
    router.push({ path: r, query: query || {} })
  }
</script>
<style lang="less">
  .user-panel{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 10px;
    padding: 20px;
    height: 120px;
    background: linear-gradient(90deg, #1baeae, #51c7c7);
    box-shadow: 0 0.05333rem 0.13333rem #269090;
    border-radius: 6px;
    .van-skeleton{
      width:100%;
      padding:10px;
      .van-skeleton-avatar{
        width: 42px;
        height: 42px;
      }
    }
    .user-img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .user-info{
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: 4px 10px;
      color: #fff;
      font-size: 0.37333rem;
    }
  }
  .van-cell-group{
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
    margin: 10px;
    box-shadow: 0 0.05333rem 0.13333rem #bfc1c5;
  }
</style>
